{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}政策展示{% endblock %}
{% block custom_css %}
    <link rel="stylesheet" href="{% static 'css/policy.css' %}">
{% endblock %}
{% block custom_bread %}

    <section class="container">
        <ul class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li class="active">政策信息列表</li>
        </ul>
    </section>
{% endblock %}
{% block content %}


    {#筛选#}
    <section class="container">
        <div class="filter">
            {#筛选上级#}
            <div class="filter-box">

                <div class="filter-title"><span>上级</span></div>
                <ul class="filter-list">
                    <li class="filter-item mainTab {% ifequal main '0' %}filter-active{% endifequal %}" id="mainTab0">
                        <a role="menuitem" tabindex="-1"><span>
                                   {{ mains.0 }}</span></a>
                    </li>
                    <li class="filter-item mainTab {% ifequal main '1' %}filter-active{% endifequal %}" id="mainTab1">
                        <a role="menuitem" tabindex="-1"><span>
                                    {{ mains.1 }}</span></a>
                    </li>
                    <li class="filter-item mainTab {% ifequal main '2' %}filter-active{% endifequal %}" id="mainTab2">
                        <a role="menuitem" tabindex="-1"><span>
                                    {{ mains.2 }}</span></a>
                    </li>
                    <li class="filter-item mainTab {% ifequal main '3' %}filter-active{% endifequal %}" id="mainTab3">
                        <a role="menuitem" tabindex="-1"><span>
                                    {{ mains.3 }}</span></a>
                    </li>
                </ul>
            </div>

            {#筛选行政#}
            <div class="filter-box">
                <div class="filter-title"><span>行政</span></div>
                {% for provinces in provincesArray %}
                    <ul id="province{{ provinces.0.main }}"
                        class="filter-list province province{{ provinces.0.main }} {% ifnotequal provinces.0.main main %}dispear{% endifnotequal %}">
                        {% for province in provinces %}
                            <li class="filter-item {% ifequal province_id province.id|stringformat:'i' %}filter-active{% endifequal %}"
                                role="presentation">
                                <a role="menuitem" tabindex="-1"
                                   href="?province={{ province.id }}"><span>
                                    {{ province.name }}</span></a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endfor %}
            </div>
            {#筛选部门#}
            <div class="filter-box-bottom">
                <div class="filter-title"><span class="">部门</span></div>
                <ul class="filter-list ">
                    <li class="filter-item {% ifequal department_id '' %}filter-active{% endifequal %}"
                        role="presentation">
                        <a role="menuitem" tabindex="-1" href="?department=&province={{ province_id }}"><span
                                class="">全部</span></a>
                    </li>
                    {% for department in departments %}
                        <li class="filter-item {% ifequal department_id department.id|stringformat:'i' %}filter-active{% endifequal %}"
                            role="presentation">
                            <a role="menuitem" tabindex="-1"
                               href="?department={{ department.id }}&province={{ province_id }}"><span
                                    class="">
                                    {{ department.name }}</span></a>
                        </li>
                    {% endfor %}

                </ul>
            </div>
        </div>
    </section>

    {#内容#}
    <section class="container module">
        {#政策列表#}
        <div class="filted-content">
            <div class="policy-list">
                {% for policy in policy.object_list %}
                    <div class="policy-item">
                    <span class="policy-item-title"><a
                            href="/policy/detail/{{ policy.policy_id }}/">{{ policy.title }}</a></span>
                        <span class="policy-item-source">{{ policy.addr }}{{ policy.source }} </span><span
                            class="policy-item-time">{{ policy.pubDate }}</span>

                        {% if policy.has_fav %}
                            <span id="{{ policy.id }}" class="module-item-btn-faved fav">取消收藏</span>
                        {% else %}
                            <span id="{{ policy.id }}" class="module-item-btn fav">收藏</span>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

        </div>
        <nav class="page-position">
            <ul class="pagination ">
                {% if policy.has_previous %}
                    <li>
                        <a href="?department={{ department_id }}&province={{ province_id }}&page={{ policy.previous_page_number }}"
                           class="prev">&lsaquo;&lsaquo; </a></li>
                {% else %}
                    <li><span class="disabled prev">&lsaquo;&lsaquo; </span></li>
                {% endif %}
                {% for page in policy.pages %}
                    {% if page %}
                        {% ifequal page policy.number %}
                            <li><span class="current page">{{ page }}</span></li>
                        {% else %}
                            <li><a href="?department={{ department_id }}&province={{ province_id }}&page={{ page }}"
                                   class="page">{{ page }}</a>
                            </li>
                        {% endifequal %}
                    {% else %}
                        <li class="disabled"><span>...</span></li>
                    {% endif %}
                {% endfor %}
                {% if policy.has_next %}
                    <li>
                        <a href="?department={{ department_id }}&province={{ province_id }}&page={{ policy.next_page_number }}"
                           class="next">
                            &rsaquo;&rsaquo;</a></li>
                {% else %}
                    <li><span class="disabled next"> &rsaquo;&rsaquo;</span></li>
                {% endif %}
            </ul>
        </nav>

    </section>


{% endblock %}
{% block custom_js %}
    <script src="{% static 'js/echarts/echarts.min.js' %}"></script>

    <script type="text/javascript">
        $(() => {
            $(".mainTab").click(function () {
                let tabId = $(this).attr("id");
                console.log('tabId', tabId)
                let chartClass = 'province'
                let id = tabId.slice(7)
                console.log("#" + chartClass + "-" + id)
                $(this).parent().children().removeClass('filter-active')
                $(this).addClass('filter-active')
                $("." + chartClass).addClass('dispear')
                $("#" + chartClass + id).removeClass('dispear')
            })

        });

    </script>

    <script type="text/javascript">
        //收藏分享
        function add_fav(current_elem, fav_id, fav_type) {
            console.log(current_elem, fav_id, fav_type)
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url "operation:add_fav" %}",
                data: {'fav_id': fav_id, 'fav_type': fav_type},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            window.location.href = "{% url 'login' %}?next={{ request.path }}";
                        } else {
                            alert(data.msg)
                        }

                    } else if (data.status == 'success') {
                        if (data.msg === '收藏') {
                            current_elem.addClass('module-item-btn')
                            current_elem.removeClass('module-item-btn-faved')
                            current_elem.text(data.msg)
                        } else {
                            current_elem.addClass('module-item-btn-faved')
                            current_elem.removeClass('module-item-btn')
                            current_elem.text(data.msg)
                        }
                    }
                },
            });
        }

        $('.fav').on('click', function () {
            add_fav($(this), $(this).attr('id'), 0);
        });


    </script>
{% endblock %}